import {reactive, toRefs, watch} from 'vue';

function useModal(value, notifySyncState) {
    const modal = reactive({
        visible: false,
        isWrapShow: false,
    });

    watch(value, (val) => {
        modal.visible = val;

        if (val) {
            document.body.classList.add('dialog-parent--hidden');
            modal.isWrapShow = val;
        } else {
            setTimeout(() => {
                modal.isWrapShow = val;
                document.body.classList.remove('dialog-parent--hidden');
            }, 300);
        }
    });

    function close() {
        notifySyncState(false);
    }

    return {
        ...toRefs(modal),
        close,
    };
}

export default useModal;
